<template>
  <div class="content">
    <p>递归</p>
    <ul class="list" id="list"></ul>
  </div>
</template>

<script>
import menuData from '../utils/menuList'
import { link } from 'fs';
export default {
  name: 'Recursive',
  data () {
    return {

    }
  },
  mounted () {
    this.treeMenu()
  },
  methods: {
    treeMenu () {
      let ulElement = document.querySelector('#list')
      let menuList = menuData.data
      ulElement.innerHTML = this.createHtml(menuList)

    },
    createHtml (items, level = 0) {

      // let str = ''
      // menuList.forEach(element => {
      //   console.log(element, 'forEach')
      //   str += `
      //     <li>${element.name}</li>
      //   `
      // });
      // ulElement.innerHTML = str

      // 函数内部，通过某种条件调用自己

      // 方法1：

      /* return items.map( item => {
        let str =  `<li style="padding-left:${level * 30}px">${item.name}</li>`

        if (Array.isArray(item.children)) {
          str += this.createHtml(item.children, level + 1)
        }

        return str
      } ).join('') */

      // 方法2：

      let s = '&nbsp;'.repeat(4 * level)
      console.log(s)

      return items.map( item => {
        let str =  `<li>${s} ${item.name}</li>`

        if (Array.isArray(item.children)) {
          str += this.createHtml(item.children, level + 1)
        }

        return str
      } ).join('')

    }
  }
}
</script>

<style lang="less" scoped>
.content {
  text-align: center;
  .list {
    text-align: left;
  }
}
</style>
